<template>
  <div>
    <div class="head">
      <div class="left">
        <img src="../assets/images/logo.png">
      </div>
      <div class="right">
        <a href="#">
          <img src="../assets/images/logoM01.png">
          <span>登录</span>
        </a>
        <a href="#">
          <img src="../assets/images/logoM02.png">
          <span>注册</span>
        </a>
      </div>
    </div>
    <div class="navv">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand navTitle" href="#">
              <div class="titleRight">
                <h2>英孚海外游学/留学</h2>
                <h3>美国，英国，加拿大，新加坡</h3>
              </div>
            </a>
          </div>
          <div class="collapse navbar-collapse navbarbar" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li>
                <a href="#">英孚首页</a>
              </li>
              <li>
                <a href="#">课程中心</a>
              </li>
              <li>
                <a href="#">精彩活动</a>
              </li>
              <li>
                <a href="#">机构介绍</a>
              </li>
              <li>
                <a href="#">常见问题</a>
              </li>
              <li>
                <a href="#">学习动态</a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </div>
    <div class="banner">
      <img src="../assets/images/banner.jpg">
    </div>
    <div class="content">
      <div class="title">
        <div class="left">上海121军事夏令营</div>
        <div class="right">></div>
      </div>
      <div class="main">
        <div class="item">
          <a href="#">
            <h3>上海121军事夏令营带给青少年儿童独一无二的体验</h3>
          </a>
          <div class="inf">
            <img src="../assets/images/kecheng.jpg">
            <div class="describe">
              <h4>上海121军事夏令营带给青少年儿童独一无二的体验</h4>
              <h5>适合对象：6-12岁青少年儿童</h5>
              <p>
                <span>￥5680</span>
                /5天
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <h3>上海121军事夏令营带给青少年儿童独一无二的体验</h3>
          </a>
          <div class="inf">
            <img src="../assets/images/kecheng.jpg">
            <div class="describe">
              <h4>上海121军事夏令营带给青少年儿童独一无二的体验</h4>
              <h5>适合对象：6-12岁青少年儿童</h5>
              <p>
                <span>￥5680</span>
                /5天
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <h3>上海121军事夏令营带给青少年儿童独一无二的体验</h3>
          </a>
          <div class="inf">
            <img src="../assets/images/kecheng.jpg">
            <div class="describe">
              <h4>上海121军事夏令营带给青少年儿童独一无二的体验</h4>
              <h5>适合对象：6-12岁青少年儿童</h5>
              <p>
                <span>￥5680</span>
                /5天
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="title">
        <div class="left">上海121军事夏令营</div>
        <div class="right">></div>
      </div>
      <div class="main">
        <div class="item">
          <a href="#">
            <h3>上海121军事夏令营带给青少年儿童独一无二的体验</h3>
          </a>
          <div class="inf">
            <img src="../assets/images/kecheng.jpg">
            <div class="describe">
              <h4>上海121军事夏令营带给青少年儿童独一无二的体验</h4>
              <h5>适合对象：6-12岁青少年儿童</h5>
              <p>
                <span>￥5680</span>
                /5天
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <h3>上海121军事夏令营带给青少年儿童独一无二的体验</h3>
          </a>
          <div class="inf">
            <img src="../assets/images/kecheng.jpg">
            <div class="describe">
              <h4>上海121军事夏令营带给青少年儿童独一无二的体验</h4>
              <h5>适合对象：6-12岁青少年儿童</h5>
              <p>
                <span>￥5680</span>
                /5天
              </p>
            </div>
          </div>
        </div>
        <div class="item">
          <a href="#">
            <h3>上海121军事夏令营带给青少年儿童独一无二的体验</h3>
          </a>
          <div class="inf">
            <img src="../assets/images/kecheng.jpg">
            <div class="describe">
              <h4>上海121军事夏令营带给青少年儿童独一无二的体验</h4>
              <h5>适合对象：6-12岁青少年儿童</h5>
              <p>
                <span>￥5680</span>
                /5天
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tabqh">
      <ul class="tab-tilte">
        <li @click="cur=0" :class="cur == 0 ?'active0' : '' ">最新</li>
        <li @click="cur=1" :class="cur == 1 ?'active0' : '' ">最热</li>
      </ul>
      <div class="tab-content">
        <div v-show="cur==0">
          <div class="tab-item">
            <a href="#">
              <h3>· 最新最热菜单table切换内容一标题一</h3>
            </a>
            <p>最新最热菜单table切换内容一标题一最新最热菜单table切换内容一标题一</p>
          </div>
          <div class="tab-item">
            <a href="#">
              <h3>· 最新最热菜单table切换内容一标题二</h3>
            </a>
            <p>最新最热菜单table切换内容一标题二最新最热菜单table切换内容一标题二</p>
          </div>
          <div class="tab-item">
            <a href="#">
              <h3>· 最新最热菜单table切换内容一标题三</h3>
            </a>
            <p>最新最热菜单table切换内容一标题三最新最热菜单table切换内容一标题三</p>
          </div>
        </div>
        <div v-show="cur==1">内容二</div>
      </div>
    </div>
    <div class="foot">
      <h3>全国咨询报名：400-1500-366</h3>
      <p>
        <span>保研</span>
        <span>机构</span>
        <span>动态</span>
        <span>地图</span>
        <span>搜索</span>
      </p>
      <h4>
        Copyright◎2020 365夏令营All Rights Reserved
      </h4>
    </div>
    <div v-if="btnFlag" id="goTop" @click="backTop">
      <img src="../assets/images/goTop.png">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnFlag: false,
      cur: 0
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  methods: {
    // 返回顶部
    backTop() {
      var timer = setInterval(function() {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    },
    // 为了计算距离顶部的高度，当高度大于100显示回顶部图标，小于100则隐藏
    scrollToTop() {
      const that = this;
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      that.scrollTop = scrollTop;
      if (that.scrollTop > 100) {
        that.btnFlag = true;
      } else {
        that.btnFlag = false;
      }
    }
  }
};
</script>

<style lang="less" scoped>
.head {
  width: 100%;
  height: 34px;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-between;
  .left {
    height: 34px;
    img {
      height: 24px;
      margin-top: 5px;
      margin-left: 10px;
    }
  }
  .right {
    height: 34px;
    display: flex;
    a {
      margin-right: 20px;
      img {
        margin-right: 5px;
        height: 20px;
      }
      span {
        line-height: 34px;
        color: #d5afa2;
      }
    }
  }
}
.navv {
  .navbar,
  .navbar-default {
    background-color: #fff;
  }
}
.navbar-header {
  height: 75px;
  button {
    margin-top: 20px;
  }
  .navTitle {
    color: #0b4159;
    .titleRight {
      h2 {
        font-size: 20px;
        font-weight: bolder;
      }
      h3 {
        font-size: 14px;
      }
    }
  }
}
.navbarbar {
  width: 100%;
  position: absolute;
  z-index: 999;
  background-color: rgba(255, 255, 255, 0.8);
}
.banner {
  width: 100%;
  img {
    width: 100%;
  }
}
.content {
  width: 100%;
  background-color: #f5f5f5;
  padding-top: 20px;
  .title {
    width: 100%;
    height: 70px;
    background-color: #fff;
    margin-bottom: 20px;
    display: flex;
    font-size: 24px;
    justify-content: space-between;
    padding-top: 20px;
    padding-bottom: 20px;
    .left {
      margin-left: 20px;
      padding-left: 25px;
      border-left: 8px solid #2196f3;
    }
    .right {
      font-size: 30px;
      color: #aaa;
      margin-right: 50px;
    }
  }
  .main {
    background-color: #fff;
    .item {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: 2px solid #f5f5f5;
      h3 {
        display: inline-block;
        white-space: nowrap;
        width: 100%;
        overflow: hidden;
        // text-overflow: ellipsis;
        font-size: 20px;
        margin-bottom: 20px;
      }
      .inf {
        display: flex;
        justify-content: space-between;
        color: #aeaeae;
        font-size: 14px;
        img {
          width: 40%;
        }
        .describe {
          width: 55%;
          line-height: 20px;
          h4 {
            display: inline-block;
            white-space: nowrap;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          p {
            float: right;
            margin-top: 20px;
            span {
              color: #ff0606;
            }
          }
        }
      }
    }
  }
}
.tabqh {
  background-color: #f5f5f5;
  padding-top: 10px;
  .tab-tilte {
    padding-left: 10px;
    padding-right: 10px;
    display: flex;
    width: 100%;
    height: 70px;
    background-color: #fff;
    margin-bottom: 10px;
    font-size: 28px;
    line-height: 70px;
    li {
      width: 140px;
      text-align: center;
    }
  }
  .tab-content {
    width: 100%;
    height: 400px;
    background-color: #fff;
    padding: 20px;
  }
}
.tab-item {
  a {
    h3 {
      display: inline-block;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 22px;
      color: #666;
      line-height: 60px;
    }
  }
  p {
    text-indent: 5px;
    display: inline-block;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    color: #999;
    line-height: 50px;
  }
}
.active0 {
  border-bottom: 3px solid #4a90e2;
}
.foot {
  width: 100%;
  height: 200px;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 20px;
  h3 {
    font-size: 16px;
    margin-bottom: 20px;
  }
  p {
    font-size: 14px;
    color: #b5b5b5;
    span {
      margin-left: 3px;
    }
  }
  h4 {
    margin-top: 5px;
    font-size: 14px;
    color: #b5b5b5;
  }
}
#goTop {
  background-color: #fff;
  width: 40px;
  position: fixed;
  bottom: 15%;
  right: 3%;
  cursor: pointer;
  img {
    width: 100%;
  }
}
</style>
